<template>
  <div class="login">

    <el-form ref="formDataRef" :model="formData" :rules="formRules" class="login-form">

      <div style="color: #5e5a5a;margin-bottom: 16px" class="fx fx_center_center">
        <img style="width: 50px;height: 50px;border-radius: 900px" src="@/common/assets/img/logo200.png">
        <span style="font-size: 20px;margin-left: 16px;font-weight: bold" :style="{color:setting.loginTitleColor}">
          {{ setting.loginTitle }}
        </span>
      </div>


      <el-form-item prop="account">
        <el-input v-model="formData.account" type="text" size="large" auto-complete="off" placeholder="账号/手机号/邮箱"
                  prefix-icon="User">
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input v-model="formData.password" type="password" show-password size="large" auto-complete="off"
                  placeholder="密码"
                  @keyup.enter="submitLogin" prefix-icon="Lock">
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="option.captchaEnabled">
        <el-input v-model="formData.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
                  @keyup.enter="submitLogin" prefix-icon="Postcard">
        </el-input>
        <div class="login-code">
          <img :src="option.codeUrl" @click="getCaptchaImg" class="login-code-img"/>
        </div>
      </el-form-item>

      <div class="fx_between" style="margin-bottom: 25px;">
        <div @click="openRegister" style="font-size: 12px;color: #0000EE" class="pointer">立即注册</div>

        <div @click="forgetPassword" style="font-size: 12px;color: #0000EE" class="pointer">忘记密码</div>
      </div>

      <el-form-item style="width:100%;">
        <el-button :loading="option.loading" size="large" type="primary" style="width:100%;"
                   @click.prevent="submitLogin">
          <span v-if="!option.loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>

    </el-form>


    <!--  底部  -->
    <div class="el-login-footer fx_col fx_center_center">
      <a style="color: #FFFFFF" :href="setting.ICPLink" target="_blank">{{ setting.ICPName }}</a>
      <div style="margin-top: 4px;margin-bottom: 6px">
        {{ setting.copyright }}
      </div>
    </div>

    <register v-if="option.openRegister" @close="option.openRegister=false"></register>

  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref, watch} from "vue";
import {apiLoginCaptchaImg, apiUserLogin} from "@/api/system";
import {encrypt} from "@/common/utils/jsencrypt";
import {setAccessToken, setRefreshToken} from "@/common/utils/cache";
import router from "@/common/router";
import {closeLoading, copyNew, loading} from "@/common/utils/kit";
import setting from "../setting";
import Register from "@/module/register.vue";
import $modal from "@/common/utils/modal";

const {proxy} = getCurrentInstance();

let optionKey = {
  loading: false,
  captchaEnabled: true,
  codeUrl: ""
}

let formKey = {
  account: "",
  password: "",
  rememberMe: false,
  expireTime: 0,
  code: "",
}

const formRules = {
  account: [{required: true, trigger: "blur", message: "请输入账号/手机号/邮箱"}],
  password: [{required: true, trigger: "blur", message: "请输入密码"}],
  code: [{required: true, trigger: "blur", message: "请输入验证码"}]
};

const option = ref(optionKey);
const formData = ref(formKey);

function resetForm() {
  formData.value = copyNew(formKey);
}

onMounted(() => {
  getCaptchaImg()
})

watch(formData.value, (value, oldValue, onCleanup) => {
  // ////console.log(" value ", value)
})

function submitLogin() {
  loading("正在登录...")
  option.value.loading = true;
  // proxy.$refs.loginRef.validate(valid => {
  //
  // })
  apiUserLogin(encryptLoginParam()).then(res => {
    if (res.success) {
      setAccessToken(res.data.accessToken)
      setRefreshToken(res.data.refreshToken)
      router.push("/index")
      closeLoading()
      return;
    }
    option.value.loading = false;
    getCaptchaImg()
    closeLoading()
  })
}

function encryptLoginParam() {
  formData.value.expireTime = new Date().getTime() + 10000;

  let paramStr = encrypt(JSON.stringify(formData.value))

  return {paramStr: paramStr}
}

// 忘记密码处理
function forgetPassword() {
  $modal.info("请联系管理员【15144042132】")
}

function openRegister() {
  option.value.openRegister = true;
  // userRegister(handlerLoginParam()).then((res) => {

  // ////console.log("handleRegister ", res)

  // }).catch((error) => {
  //   getCaptchaImg()
  // })
}

function getCaptchaImg() {
  apiLoginCaptchaImg().then((res) => {
    option.value.codeUrl = "data:image/gif;base64," + res.data.img;
    formData.value.id = res.data.id;
  })

}

function getCookie() {

}

</script>

<style lang='less' scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("@/common/assets/img/background.png");
  background-size: cover;
}


.login-form {
  border-radius: 6px;
  background: linear-gradient(to right, #FAF1E2, #DDe7e0);
  //background-image: url("../assets/img/login_bg.png");
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  position: fixed;
  bottom: 0;
  color: #fff;
  font-family: Arial;
  font-size: 14px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>
